<template>
  <div class="app-container">
    <!--查询-->
    <el-form ref="queryForm" size="small" :model="queryParams">
      <el-row type="flex" class="rows">
        <el-col class="cols">
          <el-form-item prop="orderDate">
            <el-date-picker v-model="queryParams.orderDate" @change="changeTime" type="datetimerange" align="right"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']"
              @keyup.enter.native="getList(1)" />
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="status">
            <el-select filterable v-model="queryParams.status" clearable placeholder="状态：请选择状态" @change="getList(1)">
              <el-option v-for="item in salesStatusList" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="account">
            <el-input v-model="queryParams.account" clearable placeholder="账号：请输入游戏账号" @keyup.enter.native="getList(1)" />
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="saleId">
            <el-input v-model="queryParams.saleId" clearable placeholder="销售编号：请输入销售编号"
              @keyup.enter.native="getList(1)" />
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="phone">
            <el-input v-model="queryParams.phone" clearable placeholder="手机号：请输入手机号" @keyup.enter.native="getList(1)" />
          </el-form-item>
        </el-col>

        <el-col class="cols">
          <el-form-item prop="salesCustomerId">
            <el-select filterable v-model="queryParams.salesCustomerId" clearable placeholder="销售客服：请选择销售客服"
              @change="getList(1)">
              <el-option v-for="item in sellList" :key="item.dictValue" :label="item.userName" :value="item.userId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="cols">
          <el-form-item prop="changeId">
            <el-select filterable @keyup.enter.native="getList(1)" v-model="queryParams.changeId" clearable
              placeholder="换绑客服：请选择换绑客服">
              <el-option v-for="item in changeList" :key="item.userId" :label="item.nickName" :value="item.userId" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="btns">
        <!--刷新-->
        <div class="wrap" @click="getList('')">
          <img src="../../../assets/images/refresh.png" />
        </div>
        <!--重置-->
        <div class="wrap" @click="resetQuery">
          <img src="../../../assets/images/search.png" />
        </div>
        <el-button @click.native="handleSale" plain size="mini">新增销售单<i class="el-icon-plus"></i></el-button>
      </div>
    </el-form>

    <!--单选分类查询-->
    <el-radio-group v-model="queryParams.dictCodeId" @input="getList(1)">
      <el-radio label="">全部</el-radio>
      <el-radio v-for="item in gameList" :label="item.dictCode" :key="item.dictCode">{{ item.dictLabel }}</el-radio>
    </el-radio-group>

    <!--列表-->
    <el-table v-loading="loading" :data="salesList" @selection-change="handleSelectionChange">
      <el-table-column label="编号" align="center" min-width="80" fixed>
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="游戏品类" align="center" prop="dictCode" width="80" />
      <el-table-column label="绑定手机" align="center" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.phoneNumber == null" style="color: red;">解绑</span> <span v-else>{{
            scope.row.phoneNumber
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机编号" align="center" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.phoneCode == null" style="color: red;">无</span> <span v-else>{{
            scope.row.phoneCode
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="status normal">未 售</span> <span v-if="scope.row.status == 2"
            class="status tradingIn">已 售</span>
          <span v-if="scope.row.status == 3" class="status soldOut">异 常</span> <span v-if="scope.row.status == 4"
            class="status abnormal">交易中</span>
          <span v-if="scope.row.status == 5" class="status soldOut">已售未换绑</span>
          <span v-if="scope.row.status == 6" class="status cancelled">已取消</span>
          <span v-if="scope.row.status == 8" class="status soldOut">回收库存</span>
        </template>
      </el-table-column>
      <el-table-column label="账号编号" align="center" prop="identifying" min-width="80" />
      <el-table-column label="账号描述" min-width="200" align="center">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <p class="hover-multi-line">{{ $line(scope.row.accountDescription) }}</p>
            <div slot="reference" class="hover-slot-line">
              {{ scope.row.accountDescription }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.accountDescription)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center" prop="account" min-width="160" :show-overflow-tooltip="true" />
      <el-table-column label="密码" align="center" prop="password" min-width="120" />
      <el-table-column label="销售金额" align="center" prop="saleAmount" min-width="100" />
      <el-table-column label="供应商家" align="center" prop="supplier" min-width="80" />
      <el-table-column label="销售渠道" align="center" prop="saleChannel" min-width="80" />
      <el-table-column label="销售编号" align="center" min-width="170" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-popover placement="top" width="200" title="" trigger="hover" :content="scope.row.saleId">
            <div style="width:100%;display:flex;flex-direction:column;justify-content:center;align-item:center;">
              <p style="text-align:center;">{{ scope.row.saleId }}</p>
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.saleId)">复制</el-button>
            </div>
            <div slot="reference">{{ scope.row.saleId }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="销售客服" align="center" prop="userName" min-width="80" />
      <el-table-column label="换绑客服" align="center" prop="changeName" min-width="80" />
      <el-table-column label="订单时间" align="center" prop="orderTime" min-width="180" />
      <el-table-column label="订单备注" align="center" prop="orderRemark" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="changeRemark(scope.row)" v-if="scope.row.id != selectRemark"> {{ scope.row.orderRemark }}</span>
          <input style="width: 100px;" v-else type="text" @blur="blurRemark(scope.row)" v-model="form.orderRemark">
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" min-width="120">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <p class="hover-multi-line">{{ $line(scope.row.remark) }}</p>
            <div slot="reference" class="hover-slot-line">
              {{ scope.row.remark }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.remark)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope" v-if="scope.row.status != 2">
          <el-button v-if="scope.row.status == 4 || scope.row.status == 5" v-hasPermi="['business:sales:complete']" size="mini" type="text"
            @click="handleComplete(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">
              完成交易
            </span>
          </el-button>
          <el-button v-hasPermi="['business:sales:question']" size="mini" type="text" @click="handleProblem(scope.row)"
            v-if="scope.row.status != 6 && scope.row.status != 8">
            <span style="color: rgba(83, 90, 244, 1);">转问题 </span>
          </el-button>
          <el-button v-if="scope.row.status == 4 || scope.row.status == 5 " v-hasPermi="['business:sales:question']" size="mini" type="text"
            @click="handleView(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">查看</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList('')" />

    <!-- 销售单对话框 -->
    <el-dialog title="新增销售表" :visible.sync="openSale" width="800px" append-to-body :close-on-click-modal="false">
      <el-form ref="formSale" :model="formSale" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售渠道：" prop="saleChannelId">
              <el-select filterable v-model="formSale.saleChannelId" placeholder="请选择销售渠道">
                <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
                  :value="item.dictCode" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="销售编号：" prop="saleId">
              <el-input v-model="formSale.saleId" placeholder="请输入销售编号" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="游戏品类：" prop="dictCodeId">
              <el-select filterable v-model="formSale.dictCodeId" placeholder="请选择游戏品类">
                <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="销售金额：" prop="saleAmount">
              <el-input v-model="formSale.saleAmount" placeholder="请输入销售金额" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="账号：" prop="account">
              <el-input v-model="formSale.account" placeholder="请输入账号" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="密码：" prop="password">
              <el-input v-model="formSale.password" placeholder="请输入密码" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="供应商家：" prop="supplier">
              <el-input v-model="formSale.supplier" placeholder="请输入供应商家" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="供货金额：" prop="suAmount"
              :rules="{ required: formSale.id ? false : true, message: '供货金额不能为空', trigger: 'change' }">
              <el-input v-model="formSale.suAmount" placeholder="请输入供货金额" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="销售客服：" prop="salesCustomerId ">
              <el-select filterable v-model="formSale.salesCustomerId" placeholder="请选择销售客服">
                <el-option v-for="item in sellList" :key="item.userId" :label="item.userName"
                  :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款账号：" prop="collectionAccount">
              <el-input v-model="formSale.collectionAccount" placeholder="请输入收款账号" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="换绑客服：" prop="changeId">
              <el-select filterable :disabled="disabled" v-model="formSale.changeId" placeholder="请选择换绑客服">
                <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName" :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="订单备注：" prop="orderRemark">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formSale.orderRemark"
                placeholder="请输入订单备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSale">取 消</el-button>
        <el-button type="primary" @click="submitFormSale">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 完成交易对话框 -->
    <el-dialog title="完成交易" :visible.sync="openComplete" width="400px" append-to-body :close-on-click-modal="false">
      <el-form ref="formComplete" :model="formComplete" :rules="rules" label-width="120px">
        <el-form-item label="销售渠道：" prop="saleChannelId" v-if="formComplete.status !=5">
          <el-select filterable v-model="formComplete.saleChannelId" placeholder="请选择销售渠道">
            <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="销售编号：" prop="saleId" v-if="formComplete.status !=5">
          <el-input v-model="formComplete.saleId" placeholder="请输入销售编号" />
        </el-form-item>

        <el-form-item label="销售金额：" prop="saleAmount" v-if="formComplete.status !=5">
          <el-input v-model="formComplete.saleAmount" placeholder="请输入销售金额" />
        </el-form-item>
        <el-form-item label="换绑手机：" prop="changePhone">
          <el-input v-model="formComplete.changePhone" placeholder="请输入换绑手机" />
        </el-form-item>
        <el-form-item label="换绑客服：" prop="changeId" v-if="formComplete.status !=5">
          <el-select filterable :disabled="disabled" v-model="formComplete.changeId" placeholder="请选择换绑客服">
            <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单备注：" prop="orderRemark" v-if="formComplete.status !=5">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formComplete.orderRemark"
            placeholder="请输入订单备注" />
        </el-form-item>

        <el-form-item label="销售客服：" prop="salesCustomerId" v-if="formComplete.status !=5">
          <el-select filterable v-model="formComplete.salesCustomerId" placeholder="请选择销售客服">
            <el-option v-for=" item  in  sellList " :key="item.userId" :label="item.userName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelComplete">取 消</el-button>
        <el-button type="primary" @click="submitFormComplete">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 转问题对话框 -->
    <el-dialog title="转问题" :visible.sync="openProblem" width="480px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="问题类型：" prop="problemType" v-if="form.status == 4 || form.status==5">
          <el-select filterable v-model="form.problemType" placeholder="请选择问题类型"
            :rules="{ required: true, message: '异常原因不能为空!', trigger: 'change' }">
            <el-option label="未售找回" value="UnsoldRecovered"></el-option>
            <el-option label="未售异常" value="UnsoldException"></el-option>
            <el-option label="订单交接" value="OrderHandover"></el-option>
            <el-option label="取消订单" value="OrderCancelled"></el-option>
            <el-option label="已售未换绑" value="SoldChangeBinding" v-if="form.status!=5"></el-option>
            <!-- <el-option v-if="!form.phoneNumber" label="取消订单" value="OrderCancelled"></el-option> -->
          </el-select>

          <el-select filterable v-if="form.status == 2" v-model="form.problemType" placeholder="请选择问题类型">
            <el-option label="已售找回" value="SoldRecovered"></el-option>
            <el-option label="已售异常" value="SoldException"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="异常原因：" prop="abnormityReason"
          v-if="form.problemType !== 'OrderHandover' && form.problemType != 'SoldChangeBinding'"
          :rules="{ required: true, message: '异常原因不能为空!', trigger: 'blur' }">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.abnormityReason"
            placeholder="请输入异常原因" />
        </el-form-item>

        <el-form-item label="上传截图：" v-if="form.problemType != 'OrderHandover' && form.problemType != 'SoldChangeBinding'">
          <el-upload class="avatar-uploader" :action="$baseURL + '/common/upload'" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.images" :src="form.images" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item v-if="form.problemType === 'OrderHandover'" label="换绑客服" prop="changeId">
          <el-select filterable :disabled="disabled" v-model="form.changeId" placeholder="请选择换绑客服">
            <el-option v-for="  item   in   changeList  " :key="item.userId" :label="item.userName"
              :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="销售渠道：" prop="saleChannelId" v-if="form.problemType =='SoldChangeBinding'">
          <el-select filterable v-model="form.saleChannelId" placeholder="请选择销售渠道">
            <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="销售编号：" prop="saleId" v-if="form.problemType =='SoldChangeBinding'">
          <el-input v-model="form.saleId" placeholder="请输入销售编号" />
        </el-form-item>

        <el-form-item label="销售金额：" prop="saleAmount" v-if="form.problemType =='SoldChangeBinding'">
          <el-input v-model="form.saleAmount" placeholder="请输入销售金额" />
        </el-form-item>
        <el-form-item label="换绑客服：" prop="changeId" v-if="form.problemType =='SoldChangeBinding'">
          <el-select filterable :disabled="disabled" v-model="form.changeId" placeholder="请选择换绑客服">
            <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单备注：" prop="orderRemark" v-if="form.problemType=='SoldChangeBinding'">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.orderRemark"
            placeholder="请输入订单备注" />
        </el-form-item>

        <el-form-item label="销售客服：" prop="salesCustomerId" v-if="form.staproblemTypetus=='SoldChangeBinding'">
          <el-select filterable v-model="form.salesCustomerId" placeholder="请选择销售客服">
            <el-option v-for=" item  in  sellList " :key="item.userId" :label="item.userName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelProblem">取 消</el-button>
        <el-button type="primary" @click="submitFormProblem">确 定</el-button>
      </div>
    </el-dialog>

    <!--交易中时，允许查看-->
    <staylnventoryView ref="staylnventoryView" :obj="form" v-if="form.id && viewShow" />
  </div>
</template>

<script>
import {
  listSales,
  getSales,
  delSales,
  addSales,
  updateSales,
  complete,
  transferToIssue
} from "@/api/business/sales";
import staylnventoryView from "@/components/staylnventoryView/index.vue";
import { readNotice } from "@/api/system/user";

export default {
  components: { staylnventoryView },
  name: "Sell",
  data() {
    return {
      disabled: false,
      viewShow: false,//查看
      //选中的备注
      selectRemark: null,
      //销售状态列表
      salesStatusList: [],
      //销售客服列表
      sellList: [],
      changeList: [],//换绑客服
      //销售渠道
      saleChannelList: [],
      //游戏列表
      gameList: [],
      activeGame: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      salesList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示销售单弹出层
      openSale: false,
      // 是否显示完成交易弹出层
      openComplete: false,
      // 是否显示转问题弹出层
      openProblem: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictCodeId: '',
        phoneId: null,
        phoneNumber: null,
        status: '4',
        accountDescription: null,
        account: null,
        password: null,
        saleAmount: null,
        saleChannel: null,
        saleId: null,
        orderTime: null,
        orderRemark: null,
        phone: null,
      },
      // 表单参数
      form: {
        images: null
      },
      formSale: {},
      formComplete: {},
      formProblem: {},
      // 表单校验
      rules: {},
      flag: false
    };
  },

  activated() {
    // 第一次不执行，第二次执行
    if (this.flag) this.getList();
  },

  created() {
    // 第一次执行，第二次不执行
    if (!this.flag) {
      this.flag = true;
      this.getList();
    }

    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
    //查询状态字典
    this.getDicts('sales_status').then(res => {
      this.salesStatusList = res.data
    })
    //查询销售渠道
    this.getDicts('sale_channel').then(res => {
      this.saleChannelList = res.data
    })
    //查询销售客服
    this.passPost('sell').then(res => {
      this.sellList = res.data
    })

    //查询换绑客服
    this.passPost('change').then(res => {
      this.changeList = res.data
    })
  },
  methods: {
    // 复制
    handleCopy(e) {
      const el = document.createElement('textarea');
      el.value = e;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      // 通知用户已复制
      this.$message({
        message: '复制成功！',
        type: 'success'
      });
    },

    //离开备注框
    blurRemark(row) {
      this.selectRemark = null
      updateSales(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },

    //点击备注框
    changeRemark(row) {
      this.selectRemark = row.id
      this.form = { ...row }
    },

    changeTime(value) {
      if (value && value.length === 2) {
        // value[0] 和 value[1] 分别是开始和结束日期的 Date 对象
        let startDate = this.formatDate(value[0]);
        let endDate = this.formatDate(value[1]);
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
        this.getList()
      }
    },

    // 日期格式化
    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();

      // 格式化每个部分，确保始终是两位数字
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    handleAvatarSuccess(response, file) {
      console.log(response.url);
      // 假设服务器响应的数据中包含了文件路径 'url'
      this.$nextTick(() => {
        // 这里放置您想要在1秒后执行的代码
        console.log('这段代码在1秒后执行');
        this.form.images = response.url; // 更新 form.image 为服务器返回的 URL
      });
    },

    beforeAvatarUpload(file) {
      // 这里可以添加上传前的逻辑，例如检查文件类型或文件大小
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      return true; // 如果检查通过，返回 true
    },

    //新建销售单 表单重置
    resetSale() {
      this.formSale = {};
      this.resetForm("formSale");
    },

    /** 新建销售单 按钮操作 */
    handleSale(row) {
      this.resetQuery();
      this.openSale = true
      this.formSale = {
        saleAmount: row.saleAmount,
        id: row.id
      }
    },

    /** 新建销售单 确认提交 */
    submitFormSale() {
      this.$refs["formSale"].validate(valid => {
        if (valid) {
          addSales(this.formSale).then(response => {
            this.$modal.msgSuccess("新增销售表成功");
            this.openSale = false;
            this.getList();
          });
        }
      });
    },

    //新建销售单 取消按钮
    cancelSale() {
      this.openSale = false;
      this.resetSale();
    },

    //完成交易 表单重置
    resetComplete() {
      this.formComplete = {};
      this.resetForm("formComplete");
    },

    /** 完成交易按钮操作 */
    handleComplete(row) {
      console.log(row);
      this.resetQuery();
      this.openComplete = true
      this.formComplete = {
        ...row
      }
    },

    /** 完成交易 确认提交 */
    submitFormComplete() {
      this.$refs["formComplete"].validate(valid => {
        if (valid) {
          complete(this.formComplete).then(response => {
            this.$modal.msgSuccess("完成交易成功");
            this.openComplete = false;
            this.getList();
          });
        }
      });
    },

    //完成交易 取消按钮
    cancelComplete() {
      this.openComplete = false;
      this.resetComplete();
    },

    //转问题 取消按钮
    cancelProblem() {
      this.openProblem = false;
      this.reset();
    },

    //转问题 表单重置
    resetProblem() {
      this.formProblem = {
        problemType: null
      };
      this.resetForm("formProblem");
    },

    /** 转问题按钮操作 */
    handleProblem(row) {
      this.resetProblem();
      this.form = { ...row }
      // this.formProblem.problemType = '1'
      this.openProblem = true
    },

    // 查看
    handleView(row) {
      this.form = row;
      this.viewShow = true;
      this.$nextTick(() => {
        this.$refs.staylnventoryView.handleShow();
      })
    },

    /** 转问题 确认提交 */
    submitFormProblem() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          transferToIssue(this.form).then(response => {
            this.$modal.msgSuccess("转问题成功");
            this.openProblem = false;
            this.getList();
          });
        }
      });
    },

    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;
      this.loading = true;
      listSales(this.queryParams).then(response => {
        this.salesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        dictCodeId: '',
        phoneId: null,
        phoneNumber: null,
        status: null,
        accountDescription: null,
        account: null,
        password: null,
        saleAmount: null,
        saleChannel: null,
        saleId: null,
        orderTime: null,
        orderRemark: null,
        createBy: null,
        createTime: null,
        delFlag: null,
        remark: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList(1);
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSales(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSales(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSales(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
        return delSales(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/sales/export', {
        ...this.queryParams
      }, `sales_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #F3F5FF;
  padding: 30px;

  ::v-deep.el-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 10px;
    border-radius: 16px 16px 0 0;
    background: #3A84FF;

    .el-form-item {
      margin-bottom: 0 !important;
    }

    .rows {
      flex-wrap: wrap;
      width: 82%;

      .cols {
        width: 200px;
        margin: 0 10px 10px 0;
      }

      .el-range-input {
        color: #0060FF;
        font-size: 12px;
      }

      .el-input__inner {
        border: 0;
        font-size: 12px;
        width: 200px;
        height: 38px;
        color: #0060FF;
      }
    }
  }

  .btns {
    display: flex;

    ::v-deep.el-button {
      background-color: #fff;
      margin-left: 12px;
      color: #3380FD;

      .el-icon-plus {
        &::after {
          content: "";
          font-weight: bold;
        }
      }
    }

    .wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: #FFFFFF;
      border: 1px solid #116BFF;
      margin-left: 12px;
      cursor: pointer;
    }
  }

  /*radio*/
  .el-radio-group {
    width: 100%;
    padding: 20px 20px 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 0 0 16px 16px;

    .el-radio {
      margin-bottom: 8px;
    }

    ::v-deep.el-radio__inner {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: #FAFBFC;
      border: 1px solid #D8E4EF;
      overflow: hidden;
      text-align: center;
      line-height: 32px;

      &::after {
        content: "☑️";
        display: block;
        color: #1890FF;
        font-size: 20px;
        width: 30px;
        height: 30px;
        background: #fff;
      }
    }
  }
}

/*标题*/
.subtitle {
  font-size: 16px;
  font-weight: 500;
  color: rgba(17, 38, 60, 1);
  border-left: 4px solid #116BFF;
  padding-left: 10px;
  margin-bottom: 20px;
  line-height: normal;
}

/*列表*/
::v-deep.el-table {
  border-radius: 16px 16px 0 0;

  th {
    height: 50px;
    background: #488DFE;
    font-family: Source Han Sans SC;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    border-right: 1px solid #E2E6F5;
  }

  td {
    height: 50px;
    font-family: Source Han Sans SC;
    font-size: 14px;
    color: #3D3D3D;
    font-weight: normal;
    border-right: 1px solid #E2E6F5;
  }

  .el-table__body tr {
    &:nth-child(odd) {
      background-color: #FEFEFE;
    }

    &:nth-child(even) {
      background-color: #F8FAFE;
    }
  }

  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      height: 10px;
    }

    &::-webkit-scrollbar-track {
      background-color: #E4E8F5;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #3380FD;
    }
  }

  .status {
    display: block;
    width: 54px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    opacity: 0.8;
    border-radius: 4px;
    font-size: 12px;
    transition: opacity 0.3s ease-in-out;
  }

  .normal {
    color: #00B3A7;
    background-color: #E0F7FA;
  }

  .tradingIn {
    color: #FFA500;
    background-color: #ffeac9;
  }

  .soldOut {
    color: #FF0000;
    background-color: #ffdada;
  }

  .abnormal {
    color: #FF00FF;
    background-color: #FFE4FF;
  }

  .cancelled {
    color: #a19f9f;
    background-color: #ececec;
  }
}

/*分页*/
.pagination {
  background-color: transparent !important;

  ::v-deep.el-pagination {
    display: flex;
    align-items: center;

    .number {
      width: 40px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border-radius: 8px;
    }

    .el-pager>.el-icon {
      height: 40px;
      width: 40px;
      background: #fff;
      line-height: 40px;
      border-radius: 8px;
    }
  }
}

::v-deep .el-dialog {
  width: 849px;
  opacity: 1;
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  p {
    font-size: 18px;
    font-weight: 400;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    margin-bottom: 15px;
    margin-left: 0;
  }

  .el-input {
    width: 165px;

    .el-input__inner {
      width: 165px;
      border: 1px solid rgba(127, 127, 213, 0.5);
      border-radius: 10px;
    }
  }

  .el-input-number {
    width: 165px;

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 0px;
      }
    }
  }

  .el-dialog__title {
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 8px;
  }
}
</style>
